<template>
  <div :id="echarts" :style="getheight" class="chart"></div>
</template>
<script>
import 'echarts-gl'
export default {
  name: 'bar3d',
  mixins: [],
  computed: {
    echarts() {
      return 'echarts' + Math.random() * 100000
    },
    getheight() {
      return `height:${this.height}px`
    }
  },
  props: {
    chartData: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 150
    }
  },
  watch: {
    chartData() {
      this.draw()
    }
  },
  data() {
    return {
      option: {
        tooltip: {},
        visualMap: {
          max: 15,
          min: 1,
          calculable: true,
          inRange: {
            color: ['#50a3ba', '#eac736', '#d94e5d']
          },
          textStyle: {
            color: '#fff'
          }
        },
        // 三维 坐标系
        grid3D: {
          // 长宽高
          boxWidth: 200,
          boxDepth: 80,
          viewControl: {
            distance: 220, //视觉距离
            autoRotate: false //自动旋转
          },
          light: {
            //光照配置 // 主光 全局光
            main: {
              intensity: 1.2,
              shadow: true
            },
            ambient: {
              intensity: 0.3
            }
          },
          //   轴线 设置
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff',
              width: 1
            }
          },
          axisPointer: {
            show: false
          }
        },
        xAxis3D: {
          type: 'category',
          name: '',
          data: []
        },
        yAxis3D: {
          type: 'category',
          name: '',
          data: []
        },
        zAxis3D: {
          type: 'value',
          name: ''
        },
        series: [
          // 三维 柱状图
          {
            type: 'bar3D',
            name: 'Bar3D',
            data: [],
            //  着色效果
            shading: 'lambert',
            // 柱:标签和样式配置
            emphasis: {
              label: {
                textStyle: {
                  fontSize: 16,
                  color: '#900'
                }
              },
              itemStyle: {
                color: '#900'
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      const chartFactor = this.$echarts.init(
        document.getElementById(this.echarts)
      )
      const formatter = params => {
        let series = params.seriesName
        let val = params.value
        return (
          series +
          '<br/>' +
          this.days[val[1]] +
          '<br/>' +
          this.hours[val[0]] +
          '<br/>值：' +
          val[2]
        )
      }
      this.option.xAxis3D.data = this.chartData.hours
      this.option.yAxis3D.data = this.chartData.days
      this.option.tooltip.formatter = formatter
      this.option.series[0].data = this.chartData.data.map(function(item) {
        return {
          value: [item[1], item[0], item[2]]
        }
      })
      chartFactor.setOption(this.option)
    },
    dealData(data) {
      let ret = []
      for (const i in data) {
        ret.push(
          {
            value: data[i].value,
            name: data[i].name,
            itemStyle: {
              normal: {
                borderWidth: 6,
                shadowBlur: 10,
                borderColor: this.color[i],
                shadowColor: this.color[i]
              }
            }
          },
          {
            value: 2,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          }
        )
      }
      return ret
    }
  }
}
</script>
<style lang="scss" scoped>
.chart {
  width: 100%;
}
</style>